<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relax</title>
    <link rel="stylesheet" href="./init.css">
    <script src="./util.js"></script>
    <script src="./web_component/timer/index.js"></script>
    <script src="./web_component/header/index.js"></script>
    <link rel="stylesheet" href="./init.css">
    <style>
        body {
            transition: all .4s;
            background-color: #fff;
        }

        .tip {
            font-size: 40px;
            color: #4b4b4b;
            font-weight: bolder;
            margin: 50px;
        }

        .obj {
            position: fixed;
            top: 0;
            left: 0;
            user-select: none;
        }

        .person {
            width: 56.8px;
            height: 130px;
            background: url(./images/person.jpg) center center no-repeat;
            background-size: contain;
            top: 40%;
            cursor: pointer;
        }

        .person.toBed {
            transform: rotate(60deg);
        }

        .bed {
            top: 40%;
            left: 50%;
        }
    </style>
</head>

<body>
    <x-header></x-header>
    <p class="tip ctr"></p>

    <div class="bed obj">
        <img src="./images/bed.jpg" alt="">
    </div>
    <div class="person obj" id="dv">
        <!-- <img src="./images/person.jpg" alt=""> -->
    </div>
    <script src="./typewriter.js"></script>
    <script>
        const header = document.querySelector("x-header").shadowRoot.querySelector(".header");
        const container = document.querySelector(".tip");
        var typewriter = new Typewriter(container, {
            loop: false,
            delay: 75,
        });
        //Anything that cannot kill you will eventually make you stronger.
        typewriter
            .typeString('累了吗？')
            .pauseFor(1000)
            .typeString("知道该怎么做了吗？")
            .start();




        var dv = document.getElementById('dv');
        const bed = document.querySelector(".bed");
        var deltaX = 0;
        var deltaY = 0;
        var isDown = false;

        function check(x, y) {
            const bedLeft = bed.offsetLeft;
            const bedTop = bed.offsetTop;
            if ((x >= bedLeft && x <= bedLeft + bed.clientWidth) && (y >= bedTop && y <= bedTop + bed.clientHeight)) {
                dv.classList.add("toBed");
                dv.onmousedown = function () { };
                document.onmousemove = function () { };
                dv.onmouseup = function () { };
                dv.style.left = "55%";
                dv.style.top = "35%";
                typewriter.deleteAll(1)
                    .typeString("睡吧，明天又是美好的一天！")
                    .start()
                document.body.style.backgroundColor = "#333";
                console.log(header)
                header.style.setProperty("--bg-c", "#333");
            } else {
                dv.classList.remove("toBed");
            }
        }
        //鼠标按下事件
        dv.onmousedown = function (e) {
            //获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;

            //获取左部和顶部的偏移量
            l = dv.offsetLeft;
            t = dv.offsetTop;
            deltaX = x - l;
            deltaY = y - t;
            //开关打开
            isDown = true;
            //设置样式  
            dv.style.cursor = 'move';
        }
        //鼠标移动
        document.onmousemove = function (e) {
            if (isDown == false) {
                return;
            }//x:655 770 y:320 370
            //获取x和y
            var nx = e.clientX;
            var ny = e.clientY;
            //计算移动后的左偏移量和顶部的偏移量
            var nl = nx - deltaX
            var nt = ny - deltaY;
            dv.style.left = nl + 'px';
            dv.style.top = nt + 'px';
        }
        //鼠标抬起事件
        dv.onmouseup = function (e) {
            //开关关闭
            isDown = false;
            dv.style.cursor = 'default';
            check(e.x, e.y);
        }
    </script>
</body>

</html>